<template>
	<view class="page">
		<cu-custom :isBack="true" bgColor="text-white bg-blue">
			<block slot="backText">返回</block>
			<block slot="content">巡检地图</block>
		</cu-custom>
		<view class="container" style="width: 100%;" :style="{'height':'calc(100vh - '+headerHeigth+'px)'}">
			<map style="width: 100%;height: 100%;" :latitude="centerPoint.latitude" :longitude="centerPoint.longitude"
			 :polyline="polyline" :markers="markers"></map>
		</view>
	</view>
</template>

<script>
	let that = null;
	export default {
		data() {
			return {
				headerHeigth: this.CustomBar,
				// 中心点坐标
				centerPoint: {},
				// 线
				polyline: [],
				// marker
				markers: []
			}
		},
		onLoad(options) {
			that = this;
			let points = JSON.parse(decodeURIComponent(options.points));
			that.handlePoints(points);
			// 绑定事件
			uni.$on('updatePoints', points => {
				that.handlePoints(points);
			})
		},
		onUnload() {
			uni.$off('updatePoints')
		},
		methods: {
			/**
			 * 处理points数据
			 */
			handlePoints: function(points) {
				if (points.length == 0) {
					return
				}
				if (points.length == 1) {
					// 只添加定位点marker
					that.markers = [that.createLocationMarker(points[0])];
				} else {
					let startMarker = that.createStartMarker(points[0]);
					let locationMarker = that.createLocationMarker(points[points.length - 1]);
					that.markers = [startMarker, locationMarker];
				}
				that.centerPoint = points[points.length - 1];
				that.polyline = [{
					points: points,
					color: '#e64340',
					width: 8
				}];
				that.$forceUpdate();
			},
			// 创建起点marker
			createStartMarker: function(p) {
				return {
					id: 0,
					latitude: p.latitude,
					longitude: p.longitude,
					iconPath: '/static/patrol/patrol_map_marker_start.png'
				}
			},
			// 创建当前位置marker
			createLocationMarker: function(p) {
				return {
					id: 1,
					latitude: p.latitude,
					longitude: p.longitude,
					iconPath: '/static/patrol/patrol_map_marker_location.png'
				}
			}

		}
	}
</script>

<style>
	.container {
		height: 0;
		flex-grow: 1;
	}
</style>
